<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">

    </div>
  </body>
</html>
<script src="./lib/jquery.js"></script>
<!-- 导入模板引擎js文件 -->
<script src="./lib/template-web.js"></script>

<!-- 准备一个模板结构,html结构 -->
<!-- type="text/html" -->
<script type="text/html" id="tpl-info">
    
    <!-- 原义输入,利用@,让标签产生效果 -->
    <div>{{@title}}</div>

    <!-- 标准输出,直接输出 -->
    <div>姓名: {{name}}</div>
    <div>年龄: {{age}}</div>

    <!-- 判断语法 -->
    <!-- 最后必须要有结尾 -->
    <div>
        玩家等级:
        {{if vip == 1}}
        青铜玩家
        {{else if vip == 2}}
        白银玩家
        {{else if vip == 3}}
        黄金玩家
        {{else}}
        不知名玩家
        {{/if}}
    </div>

    <!-- 循环语法 -->
    <!-- $index: 下标 -->
    <!-- $value: 数据 -->
    <ul>
        {{each hobby}}
            <li>{{$index + 1}}-{{$value}}</li>
        {{/each}}
    </ul>

    <!-- 过滤函数处理 -->
    <!-- 原始数据的格式不满足需求,所以需要提前进行处理 -->
    <!-- 原始数据 | 过滤函数 -->
    <div>
        注册时间: {{time | getTime}}
    </div>

</script>

<script>
    $(function () {
        // 给模板引擎准备一个过滤函数来处理数据
        // template.defaults.imports.函数名字 = function(){xxxx}
        template.defaults.imports.getTime = function(time) {
            // 将时间对象time进行格式处理
            // yyyy-mm-dd hh:mm:ss
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let day = time.getDate();
            let hour = time.getHours();
            let min = time.getMinutes();
            let sec = time.getSeconds();

            // 将处理的数据返回出去
            return `${year}/${month}/${day} ${hour}:${min}:${sec}`;
        }

        // 需求: 将对象中的数据,渲染到指定的结构中去
        // 1. 准备一个假数据
        let weishao = {
            title: '<h1>威少的个人信息</h1>',
            name: '威少',
            age: 38,
            vip: 5,
            hobby: ['撩汉','调戏同桌','是个好人'],
            time: new Date()
        }

        // 2. 利用模板引擎,将数据渲染到指定位置
        // 利用template('模板id', 数据对象),返回一个标签字符串
        let htmlStr = template('tpl-info', weishao)
        $('.container').html(htmlStr);
    })
</script>